<template>
  <view class="popup-page">
    <u-popup :show="showPayType" :round="20" mode="bottom" closeable @close="closePopup" @open="payType=''">
      <view class="pay-type customize-popup">
        <view class="popup-title">选择支付方式</view>
        <u-radio-group
          v-model="payType"
          @change="onChange"
          placement="column"
          activeColor="#56CB03"
          size="32rpx"
        >
          <view class="pay-list">
            <view class="pay-item">
              <view class="pay-icon">
                <image src="../static/payType1.png" />
                <view class="pay-name">微信支付</view>
              </view>
              <u-radio name="wechat"></u-radio>
            </view>
            <view class="pay-item" style="border-bottom: 0;">
              <view class="pay-icon">
                <image style="width: 56rpx;height: 56rpx" src="../static/payType2.png" />
                <view class="pay-name">支付宝支付</view>
              </view>
              <u-radio name="ali"></u-radio>
            </view>
          </view>
        </u-radio-group>
      </view>
		</u-popup>
  </view>
</template>

<script>
export default {
  props: {
    showPayType: {
      type: Boolean,
      default: false,
    },
    closePopup: {
      type: Function,
      default: () => {},
    },
    pay: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      payType: '',
    };
  },
  onLoad() {},
  methods: {
    onChange(e) {
      this.pay(e)
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-type {
  width: 750rpx;
  height: 400rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 40rpx 24rpx ;
  .pay-list {
    .pay-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 30rpx;
      margin-bottom: 34rpx;
      border-bottom: 2rpx solid #E1E1E1;
      .pay-icon {
        display: flex;
        align-items: center;
        gap: 28rpx;
        font-size: 28rpx;
        image {
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
  }
}
</style>
